<html>
  <head>
    <style></style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      html,body { margin: 0; padding: 0; }
      .box canvas {
        border-right: 1px solid #aaaaaa40;
        border-bottom: 1px solid #aaaaaa40;
        background-image:
        linear-gradient(#aaaaaa40 1px, transparent 0),
        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
        linear-gradient(#aaa 1px, transparent 0),
        linear-gradient(90deg, #aaa 1px, transparent 0);
        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
      }
      .list {
        width: 910px;
        overflow: hidden;
        border-top: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
      }
      .box {
        width: 300;
        min-height: 220;
        float: left;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 0;
      }
      .box .title {
        text-align: center;
        font-size: 14px;
        color: #000;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: monospace;
      }
    </style>
  </head>
  <body>

    <div class="list">
      <div class="box" id="mount-1">
        <div class="title">Scale 0.5 to 1</div>
      </div>
      <div class="box" id="mount-2">
        <div class="title">Scale 2 and Scroll</div>
      </div>
      <div class="box" id="mount-3">
        <div class="title">Scale 2 to 1 and Scroll</div>
      </div>
      <div class="box" id="mount-4">
        <div class="title">Scale 0.5 and Scroll</div>
      </div>
      <div class="box" id="mount-5">
        <div class="title">Scale 0.5 and Console result</div>
      </div>
    </div>

    <script src="../../../packages/board/dist/index.global.js"></script>

    <script>
      function drawBoard(board) {
        const ctx = board.getContext();
        ctx.setFillStyle('#ffffff');
        ctx.fillRect(0, 0, 300, 200);

        ctx.setFillStyle('#f0f0f0');
        ctx.fillRect(5, 5, 100, 60);

        ctx.setFillStyle('#cccccc');
        ctx.fillRect(40, 40, 100, 60);

        ctx.setFillStyle('#c0c0c0');
        ctx.fillRect(80, 80, 100, 60);

        ctx.setFillStyle('#e0e0e0');
        ctx.fillRect(200 - 5, 150 - 5, 100, 50);

        ctx.setFillStyle('#000');
        ctx.fillRect(150 - 5, 100 - 5, 10, 10);
      }
    </script>

    <script>
    (function () {
      const { Board } = window.iDrawBoard; 
      const mount = document.querySelector('#mount-1');
      const board = new Board(mount, {
        width: 300,
        height: 200,
        contextWidth: 300,
        contextHeight: 200,
        devicePixelRatio: 4
      });
      drawBoard(board);

      board.scale(0.5);
      board.scale(1);
      board.draw();
    })();
    </script>
    <script>
    (function() {
      const { Board } = window.iDrawBoard; 
      const mount = document.querySelector('#mount-2');
      const board = new Board(mount, {
        width: 300,
        height: 200,
        contextWidth: 300,
        contextHeight: 200,
        devicePixelRatio: 4
      });

      drawBoard(board);

      board.scale(2);
      board.scrollX(-150);
      board.scrollY(-100);
      board.draw();
    })()
    </script>

    <script>
    (function() {
      const { Board } = window.iDrawBoard; 
      const mount = document.querySelector('#mount-3');
      const board = new Board(mount, {
        width: 300,
        height: 200,
        contextWidth: 300,
        contextHeight: 200,
        devicePixelRatio: 4
      });

      drawBoard(board);

      board.scale(2);
      board.scrollX(-300);
      board.scrollY(-200);
      board.scale(1);
      board.draw();
    })()
    </script>

    <script>
    (function() {
      const { Board } = window.iDrawBoard; 
      const mount = document.querySelector('#mount-4');
      const board = new Board(mount, {
        width: 300,
        height: 200,
        contextWidth: 300,
        contextHeight: 200,
        devicePixelRatio: 4
      });

      drawBoard(board);

      board.scale(0.5);
      board.draw();
    })()
    </script>

    <script>
    (function() {
      const { Board } = window.iDrawBoard; 
      const mount = document.querySelector('#mount-5');
      const opts = {
        width: 300,
        height: 200,
        contextWidth: 500,
        contextHeight: 400,
        devicePixelRatio: 4
      }
      const board = new Board(mount, opts);

      const ctx = board.getContext();

      ctx.setFillStyle('#ffffff');
      ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);

      ctx.setFillStyle('#f0f0f0');
      ctx.fillRect(5, 5, 100, 60);

      ctx.setFillStyle('#cccccc');
      ctx.fillRect(40, 40, 100, 60);

      ctx.setFillStyle('#c0c0c0');
      ctx.fillRect(80, 80, 100, 60);

      ctx.setFillStyle('#e0e0e0');
      ctx.fillRect(130, 130, 100, 50);

      ctx.setFillStyle('#e0e0e0');
      ctx.fillRect(250 - 5, 250 - 5, 100, 50);

      ctx.setFillStyle('#c0c0c0');
      ctx.fillRect(300, 300, 100, 50);

      ctx.setFillStyle('#cccccc');
      ctx.fillRect(380, 345, 100, 50);

      ctx.setFillStyle('#000');
      ctx.fillRect(250 - 5, 225 - 5, 10, 10);

      const result = board.scale(0.5);
      console.log('result =', result);

      board.draw();
    })()
    </script>

  </body>
</html>